<!--
 * @Author: 梁卓
 * @Date: 2022-02-23 16:00:52
 * @LastEditTime: 2022-03-07 16:29:17
 * @LastEditors: Please set LastEditors
 * @Description: 生成测试试卷
 * @FilePath: \dreamUi\src\views\exam\Paper.vue
-->
<template>
  <div>
    <div v-show="open">
      <el-card>
        <el-row>
          <el-col :span="24">
            <h1>生成测试试卷</h1>
          </el-col>
          <el-col :span="8">
            <el-input  v-model="queryInfo.queryString" clearable placeholder="请输入题干内容" @clear="getQuestionInfoAndChose">
              <el-button icon="el-icon-search" slot="append" @click="getQuestionInfoAndChose"></el-button>
            </el-input>
          </el-col>
          <el-col :span="15">
            <el-button type="primary" @click="openNewPage">生成试卷</el-button>
          </el-col>
          <el-col :span="24">
            <el-table :data="tableData" style="width: 100%" max-height="500" @row-click="handleEdit"> 
              <el-table-column fixed prop="questuinId" label="选择" width="50">
                <el-checkbox style="float: left;" @change="changeCheckbox"></el-checkbox>
              </el-table-column>
              <el-table-column fixed prop="question" label="问题" width="550"/>
              <!-- A选项 -->
              <el-table-column label="选项A" prop="questionChose[0].chose" width="450"/>
              <!-- B选项 -->
              <el-table-column label="选项B" prop="questionChose[1].chose" width="450"/>
              <!-- C选项 -->
              <el-table-column label="选项C" prop="questionChose[2].chose" width="450"/>
              <!-- D选项 -->
              <el-table-column label="选项D" prop="questionChose[3].chose" width="450"/>
              <!-- E选项 -->
              <el-table-column label="选项E" prop="questionChose[4].chose" width="450"/>
              <!-- F选项 -->
              <el-table-column label="选项F" prop="questionChose[5s].chose" width="450"/>
            </el-table>
          </el-col>
          <el-col :span="24">
            <el-pagination
              v-if="total > 0"
              :currentPage="queryInfo.currentPage"
              :page-sizes="[8,15,30,50]"
              :page-size= "queryInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total= total
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              style="margin-top: 40px;">
            </el-pagination>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <!-- 生成试卷页面 -->
    <div v-show="!open">
      <Handle @handleChangeOpen="handleChangeOpen" :questionArr="questionArr" :checkedQuestionArr="checkedQuestionArr"/>
    </div>
  </div>
</template>

<script>
import Handle from '@/views/exam/createPaper/Handle'
export default {
  name: 'Paper',
  components:{Handle},
  data() {
    return {
      tableData: [],
      queryInfo: {
        pageNumber: 1,
        pageSize: 8,
        queryString: ''
      },
      total: 0,
      // 被选中的questionId
      check: '',
      // 选中题de集合
      questionArr: [],
      open: true,
      // 选中试题的对象
      checkedQuestion: {},
      //选中试题对象的集合
      checkedQuestionArr: []
    };
  },

  mounted() {
    this.getQuestionInfoAndChose()
  },

  methods: {
    getQuestionInfoAndChose() {
      this.$ajax.post('/questionInfo/getQuestionInfoAndChose',this.queryInfo).then(res => {
        this.tableData = res.data.rows
        this.total = res.data.total
      });
    },
    // 改变分页的大小
    handleSizeChange(param) {
      this.queryInfo.pageSize = param;
      // 重新赋值
      this.getQuestionInfoAndChose();
    },
    // 改变当前页码
    handleCurrentChange(param) {
      this.queryInfo.pageNumber = param;
      this.getQuestionInfoAndChose();
    },
    // 获取table表格中每一行的数据
    handleEdit(row) {
      // 得到选中的试题对象
      this.checkedQuestion = row
      // 得到选中试题的questionId
      this.check = row.questionId;
    },
    // 根据是否勾选生成试题Id集合
    changeCheckbox(param) {
      if (param) {
        // 添加questionId到数组中
        this.questionArr.push(this.check)
        // 添加选中的问题对象到数组中
        this.checkedQuestionArr.push(this.checkedQuestion)
      } else {
        // 删除指定元素并重新赋值
        this.questionArr = this.questionArr.filter(item => item != this.check)
        // 根据questionId删除指定的对象
        this.checkedQuestionArr = this.checkedQuestionArr.filter(item => item.questionId != this.checkedQuestion.questionId)
      }
    },
    // 改变生成试卷界面是否打开
    openNewPage() {
      this.open = !this.open
    },
    // 通过子组件传来的值进行  改变查询/修改活动信息是否展示
    handleChangeOpen() {
      this.open = !this.open
    }
  },
};
</script>

<style scoped>
.infinite-list-item {
  background-color: aqua;
  margin: 30px 0;
}
</style>